import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Row, Col, DatePicker, Input, InputNumber, Tooltip, Mentions, TreeSelect } from 'antd';
import axios from '../../components/Engineering/axios'
import AsynchronousLoadTreeNode from './components/asyn-chronous-load-tree-node'
import '@/utils/app.css'

const { Search, TextArea } = Input
const { Option, OptGroup } = Select;
const { TreeNode } = TreeSelect;
const FormItem = Form.Item;



const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];


class TreeSelecrForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: undefined
    }
  }
  render() {
    return (
      <>
        <Card title='基本、多选' style={{ marginTop: 10 }} >
          <TreeSelect
            showSearch
            style={{ width: 300 }}
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="Please select"
            allowClear
            multiple
            treeDefaultExpandAll
            onChange={(value) => this.setState({ value })}
          >
            <TreeNode value="0" title="parent 1" key="0-1">
              <TreeNode value="0-0" title="parent 1-0" key="0-1-1">
                <TreeNode value="0-0-1" title="my leaf" key="random" />
                <TreeNode value="0-0-2" title="your leaf" key="random1" />
              </TreeNode>
              <TreeNode value="0-1" title="parent 1-1" key="random2">
                <TreeNode value="0-1-1" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
              </TreeNode>
            </TreeNode>
          </TreeSelect>
        </Card>

        <Card title='从数据直接生成、可勾选' style={{ marginTop: 10 }} >
          <TreeSelect
            style={{ width: 300 }}
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            placeholder="Please select"
            treeDefaultExpandAll
            multiple
            treeCheckable
            onChange={(value) => this.setState({ value })}
          />
        </Card>

        <Card title='异步加载树节点' style={{ marginTop: 10 }} >
        <AsynchronousLoadTreeNode></AsynchronousLoadTreeNode>
        </Card>


      </>
    )

  }
}

export default Form.create({ name: 'TreeSelecrForm' })(TreeSelecrForm)



// API#
// Tree props#
// 参数	                        说明	类型	默认值	版本
// allowClear	                 显示清除按钮	boolean	false	
// autoClearSearchValue	       当多选模式下值被选择，自动清空搜索框	boolean	true	3.7.0
// defaultValue	               指定默认选中的条目	string/string[]	-	
// disabled	                   是否禁用	boolean	false	
// dropdownClassName	         下拉菜单的 className 属性	string	-	3.3.0
// dropdownMatchSelectWidth	   下拉菜单和选择器同宽。默认将设置 min-width。	boolean	true	
// dropdownStyle	             下拉菜单的样式	object	-	
// filterTreeNode	             是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值	boolean|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值)	Function	
// getPopupContainer	         菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body	
// labelInValue	               是否把每个选项的 label 包装到 value 中，会把 value 类型从 string 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式	boolean	false	
// loadData	                   异步加载数据	function(node)	-	
// maxTagCount	               最多显示多少个 tag	number	-	3.7.0
// maxTagPlaceholder	         隐藏 tag 时显示的内容	ReactNode/function(omittedValues)	-	3.7.0
// multiple	                   支持多选（当设置 treeCheckable 时自动变为 true）	boolean	false	
// placeholder	               选择框默认文字	string	-	
// searchPlaceholder	         搜索框默认文字	string	-	
// searchValue	               搜索框的值，可以通过 onSearch 获取用户输入	string	-	3.7.0
// treeIcon	                   是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式	boolean	false	3.13.1
// showCheckedStrategy	       定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD	
// showSearch	                 是否支持搜索框	boolean	单选：false | 多选：true	
// size	                       选择框大小，可选 large small	string	'default'	
// suffixIcon	                 自定义的选择框后缀图标	ReactNode	-	3.10.0
// treeCheckable	             显示 checkbox	boolean	false	
// treeCheckStrictly	         checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 labelInValue 强制为 true	boolean	false	
// treeData	                   treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）	array\<{value, title, children, [disabled, disableCheckbox, selectable]}>	[]	
// treeDataSimpleMode	         使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', title:"test1",...},...], pId 是父节点的 id)	false|object\<{ id: string, pId: string, rootPId: string }>	false	
// treeDefaultExpandAll	       默认展开所有树节点	boolean	false	
// treeDefaultExpandedKeys	   默认展开的树节点	string[]	-	
// treeExpandedKeys	           设置展开的树节点	string[]	-	3.10.0
// treeNodeFilterProp	         输入项过滤对应的 treeNode 属性	string	'value'	
// treeNodeLabelProp	         作为显示的 prop 设置	string	'title'	
// value	                     指定当前选中的条目	string/string[]	-	
// onChange	                   选中树节点时调用此函数	function(value, label, extra)	-	
// onSearch	                   文本框值变化时回调	function(value: string)	-	
// onSelect	                   被选中时调用	function(value, node, extra)	-	
// onTreeExpand	               展示节点时调用	function(expandedKeys)	-	3.10.0

// Tree 方法#
// 名称	                       描述	版本
// blur()	                     移除焦点	
// focus()	                   获取焦点	

// TreeNode props#
// 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
// 参数	                      说明	类型	默认值	版本
// selectable	                是否可选	boolean	true	3.9.3
// disableCheckbox	          禁掉 checkbox	boolean	false	
// disabled	                  是否禁用	boolean	false	
// isLeaf	                    是否是叶子节点	boolean	false	
// key	                      此项必须设置（其值在整个树范围内唯一）	string	-	
// title	                    树节点显示的内容	string|ReactNode	'---'	
// value	                    默认根据此属性值进行筛选（其值在整个树范围内唯一）	string